<template>
  <div class="aui-card-list">
    <uni-list-query-card :queryShow="queryShow" @query-click="getDataList()" @click="(e)=>{this.queryShow=e}" @searchReset="searchReset()">
      <el-col :span="6">
        <el-form-item :label="$t('user.username')">
          <el-input v-model="dataForm.username" :placeholder="$t('user.username')" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item :label="$t('user.realName')">
          <el-input v-model="dataForm.realName" :placeholder="$t('user.realName')" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item :label="$t('user.deptName')">
          <el-input v-model="dataForm.deptName" :placeholder="$t('user.deptName')" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item :label="$t('user.userType')">
          <el-select v-model="dataForm.userType" :placeholder="$t('user.userType')" clearable>
            <el-option v-for="template in this.$getDictList('SYS_USER_TYPE', false)" :key="template.val" :label="template.label" :value="template.val"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </uni-list-query-card>
    <el-card shadow="never" class="aui-card-list-body">
      <vxe-toolbar :setting="{immediate:true}">
        <template v-slot:buttons>
          <el-button type="primary" v-if="roleGrade=='0'" @click="show()">
            添加用户
          </el-button>
        </template>
        <template v-slot:tools>
          <!-- <el-button icon="el-icon-search" @click="searchShowHandle()" circle></el-button> -->
          <el-button icon="el-icon-refresh" @click="getDataList()" circle></el-button>
          <!-- <el-button icon="el-icon-download" @click="$refs.xTable.openExport()" circle></el-button> -->
        </template>
      </vxe-toolbar>
      <div class="aui-card-list-body-table">
        <vxe-table :loading="dataListLoading" :data="dataList" ref="xTable" auto-resize class="vxe-table-element" remote-sort @sort-change="dataListSortChangeHandle" @select-change="dataListSelectionChangeHandleVex" @select-all="dataListSelectionAllChangeHandleVex" max-height="auto">
          <vxe-table-column type="index" width="50" align="center"></vxe-table-column>
          <vxe-table-column field="username" title="user.username" sortable width="120" :show-overflow="true"></vxe-table-column>
          <vxe-table-column field="realName" title="user.realName" width="80" align="center"></vxe-table-column>
          <vxe-table-column field="deptName" title="user.deptName" width="auto" align="center"></vxe-table-column>
          <vxe-table-column field="mobile" title="user.mobile" sortable width="110" align="center">
          </vxe-table-column>
          <vxe-table-column field="email" title="user.email" width="auto"></vxe-table-column>
          <vxe-table-column field="status" title="user.status" sortable width="80" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 0" size="small" type="danger">{{ $t('user.status0') }}</el-tag>
              <el-tag v-else size="small" type="success">{{ $t('user.status1') }}</el-tag>
            </template>
          </vxe-table-column>
          <vxe-table-column field="createDate" title="user.createDate" sortable width="160" align="center">
          </vxe-table-column>
          <vxe-table-column v-if="roleGrade=='0'" title="handle" width="70" align="center">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-delete" size="small" @click="removeRoleUser(scope.row.id)">移除
              </el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
        </el-pagination>
        <uni-user-select v-if="dialogVisible" ref="userSelect" @backFun="backFun" :initDataForm="{flag:1}" :multiple="true"></uni-user-select>
      </div>
    </el-card>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import qs from 'qs'

export default {
  mixins: [mixinViewModule],
  data () {
    return {
      dialogVisible: false,
      secAdminVisible: false,
      userDataScopeVisible: false,
      mixinViewModuleOptions: {
        getDataListURL: '/sys/user/page',
        getDataListIsPage: true,
        deleteURL: '/sys/user',
        deleteIsBatch: true,
        exportURL: '/sys/user/export'
      },
      roleGrade: this.$route.params.roleGrade,
      dataForm: {
        username: '',
        deptName: '',
        realName: '',
        userType: '',
        roleIds: this.$route.params.roleIds
      }
    }
  },
  methods: {
    show () {
      this.dialogVisible = true
      // 等待DOM完成更新 v-if 渲染后执行
      this.$nextTick(() => {
        this.$refs.userSelect.defaultValues = this.dataList
        this.$refs.userSelect.init()
      })
    },
    backFun (data) {
      let ids = data.map(function (c) {
        return c.id
      })
      if (!ids || !ids.length) {
        return
      }
      this.dataListLoading = true
      this.$http['post']('/sys/role/addUsers', qs.stringify({
        roleId: this.dataForm.roleIds,
        userIds: ids
      }, { arrayFormat: 'brackets' }
      )
      ).then(({ data: res }) => {
        this.dataListLoading = false
        if (res.code !== 0) {
          return
        }
        this.getDataList()
      }).catch(() => { })
    },
    removeRoleUser (id) {
      if (!id) {
        return
      }
      this.$confirm('是否移除用户？', '提示', {
        confirmButtonText: '移除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = [id]
        this.dataListLoading = true
        this.$http['post']('/sys/role/removeRoleUser', qs.stringify({
          roleId: this.dataForm.roleIds,
          userIds: ids
        }, { arrayFormat: 'brackets' }
        )
        ).then(({ data: res }) => {
          this.dataListLoading = false
          if (res.code !== 0) {
            return
          }
          this.getDataList()
        }).catch(() => { })
      }).catch(() => {

      })
    }
  }
}
</script>

<style scoped>
.el-tag--mini {
  margin: 0 2px;
  padding: 0 2px;
  font-size: 10px;
  height: 18px;
  line-height: 18px;
}
</style>
